<template>
  <!-- 留言板 -->
  <div class="message-board" style="max-width: 800px; margin: auto;">
    <button style="background-color: #007BFF;color:white;cursor: pointer;" @click="goBack" >
      <i class="el-icon-arrow-left"></i> 返回
    </button>
    <h1 style="text-align: center">在线咨询</h1>

    <!-- 输入框 -->
    <el-form :model="form" style="width: 100%; margin-bottom: 20px;">
      <el-input v-model="form.message" type="textarea" :rows="4" placeholder="请输入咨询内容..."></el-input>
    </el-form>

    <h2 style="margin-top: 30px;">| 热门关键词</h2>
    <ul class="keywords-list" style="list-style-type: none;padding: 0;
        display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;">
      <li
          v-for="(keyword, index) in paginatedKeywords"
          :key="index"
          @click="addKeywordToInput(keyword)"
          style="cursor: pointer;"
      >
        {{ keyword }}
      </li>
    </ul>

    <!-- 分页控件 -->
    <div class="pagination" v-if="totalPages > 1">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>

    <!-- 添加宠物图片说明 -->
    <h2 style="margin-top: 30px;">| 添加宠物图片说明</h2>
    <div class="images-container">
      <img v-for="(image, index) in uploadedImages" :key="index" :src="image" alt="上传的图片" />
    </div>
    <input type="file" @change="handleFileUpload" multiple accept="image/*" style="display: block; margin: 20px auto;" />

    <button style="display: block;width: 70%;height:45px;padding: 10px;margin: 20px auto;background-color: #007BFF;
            color: white;border: none;border-radius: 5px;cursor: pointer;" @click="form.ask">点击咨询</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElIcon, ArrowLeft } from 'element-plus';

// 定义一个响应式表单对象
const form = ref({
  message: '',
  ask: '',
});

// 热门关键词列表
const keywords = ref([
  '宠物疫苗',
  '训练大小便',
  '宠物拉肚子吃什么',
  '猫咪脖子后面有个黑黑的东西',
  '兔子拉稀怎么办',
  '仓鼠可以喝温水吗',
  '狗狗洗澡注意事项',
  '猫咪绝育的好处',
  '鸟类饲养技巧',
  '鱼类水质管理',
  '宠物保险种类',
  '宠物营养补充',
]);

// 用于存储上传的图片
const uploadedImages = ref([]);

// 当前页码
const currentPage = ref(1);

// 每页显示的关键词数量
const itemsPerPage = 6;

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(keywords.value.length / itemsPerPage);
});

// 获取当前页的关键词
const paginatedKeywords = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return keywords.value.slice(start, end);
});

// 处理文件上传
const handleFileUpload = (event) => {
  const files = event.target.files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();
    reader.onload = (e) => {
      uploadedImages.value.push(e.target.result);
    };
    reader.readAsDataURL(file);
  }
};

// 将关键词添加到输入框
const addKeywordToInput = (keyword) => {
  if (form.value.message) {
    form.value.message += ` ${keyword}`;
  } else {
    form.value.message = keyword;
  }
};

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

// 返回按钮的点击事件处理函数
const goBack = () => {
  // 在这里实现返回逻辑，例如：
  // history.back();
  // 或者使用 Vue Router 的导航方法
  // this.$router.go(-1);
};
</script>

<style scoped>
.keywords-list li {
  background-color: #f0f0f0;
  padding: 10px 20px;
  border-radius: 5px;
  flex: 1 1 calc(250px - 30px); /* 每个项目的宽度为33.333%，减去间距 */
  box-sizing: border-box;
  text-align: center;
  cursor: pointer; /* 改变鼠标指针为手形，表示可点击 */
}

.keywords-list li:hover {
  background-color: #e0e0e0; /* 鼠标悬停时改变背景色 */
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.pagination button {
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.images-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  flex-wrap: wrap; /* 允许图片换行 */
}

.images-container img {
  max-width: 30%; /* 确保图片不会太大 */
  height: auto;   /* 维持图片比例 */
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 10px; /* 图片之间的间距 */
}
</style>